Proyecto Angular Amplify

Crear un proyecto base usando Angular, Amplify, Appsync y DynamoDB

Documentación referencia

Código de Ejemplo

Creamos un proyecto de angular con routing:

ng new TodoAppTest --routing

Una vez generado el proyecto creamos el archivo src/polyfills.ts, con el siguiente contenido:

(window as any).global = window;
(window as any).process = {
  env: { DEBUG: undefined },
};

Editamos el archivo angular.json para incluir la linea "src/polyfills.ts" en el array de "polyfills":

Editamos el archivo tsconfig.app.json para incluir la linea "src/polyfills.ts" en el array de "files":

Iniciamos Amplify en el proyecto con el siguiente comando:

amplify init

Dejamos todas las opciones por defecto:

Cuando nos pregunte por metodo de autenticación elegimos AWS access keys e indicamos el access key de un usuario con permisos para amplify

Podemos consultar como hacer la creación del usuario AQUI

Una vez hecho esto se creará el proyecto de Amplify en AWS:

Si nos vamos a la consola de AWS, podremos ver el proyecto:

Ahora añadimos el modulo de API de amplify a nuestro proyecto:

amplify add api

Seleccionamos GraphQL:

Dejamos las demas opciones por defecto:

Seleccionamos el esquema para hacer una lista de tareas (TODO):

Cuando nos pregunte si queremos modificar el "schema" le decimos que si:

Y se nos abrirá el archivo schema.graphql para que lo editemos:

El archivo se encuentra en:

amplify/backend/api/todoapptest/schema.graphql

Aqui ahora podemos modificar los atributos que queramos, pero en este caso lo vamos a dejar asi tal cual.

Ahora hacemos un push para sincronizar todos los datos con amplify:

amplify push

Nos mostrará los recursos que se van a sincronizar y nos preguntará si estamos seguros:

Nos pregunta si queremos que genere el código de GraphQL para el schema que hay creado, le decimos que si:

Nos hará unas preguntas sobre como generar el código y en que archivos, dejamos todo por defecto:

Una vez termine nos dirá que se ha completado el despliegue:

Ahora ya tenemos todo el entorno de Amplify listo para ser utilizado e implementarlo en nuestra applicación.

NOTA: Un cambio a mayores que tenemos que hacer es renombrar el archivo src/aws-exports.js para cambiarlo a src/aws-exports.ts

Primero creamos un componente "Todo" que será el que utilice el servicio de Amplify para crear la "lista de tareas":

ng g c todo

Instalamos los siguientes paquetes:

npm install --save aws-amplify @aws-amplify/ui-angular @aws-amplify/api-graphql

Modificamos el archivo de rutas app-routing.module.ts para añadir el componente "todo" como componente por defecto:

Iniciamos amplify en el main.ts:

import { Amplify } from 'aws-amplify';
import aws_exports from './aws-exports';

Amplify.configure(aws_exports);

Añadimos el siguiente código en el archivo todo.component.html

 <div style="text-align:center">
    <input type="text" #todoName>
    <button (click)="createTodo(todoName)">Create Todo</button>
  
    <div *ngFor="let todo of allTodos">
      <hr>
      <p> Title: {{todo.name}}</p>
    </div>
</div>

Añadimos el siguiente código en el archivo todo.component.ts

 @Component({
  selector: 'app-todo',
  templateUrl: './todo.component.html',
  styleUrls: ['./todo.component.scss']
})
export class TodoComponent {
  allTodos:any = [];

  constructor(private api:APIService) { }

  async ngOnInit() {
    await this.listTodos()
  }

  async createTodo(todoName: any){
    if(todoName.value.length){ 
      const newTodo = {
        name: todoName.value,
        description: 'sample description'
      }
      await this.api.CreateTodo(newTodo);   
      todoName.value = null;
      await this.listTodos()
    }
    
  }

  async listTodos(){
    let result = await this.api.ListTodos();
    this.allTodos = result.items;
  }
}

Una vez tenemos todo, ya podemos utilizar nuestra aplicación, todos lo que vayamos añadiendo con la interfaz se muestra en la lista inferior:

Y si nos vamos a la sección de DynamoDB en la consola de AWS, podemos ver que toda la información está guardada ahí:

Si obtenemos un error como el siguiente:

Error: export 'GRAPHQL_AUTH_MODE' (reexported as 'GRAPHQL_AUTH_MODE') was not found in './types' (possible exports: GraphQLAuthError)

Para solucionarlo borramos la carpeta .angular y volvemos a lanzar el comando ng serve, para que se reconstruya el proyecto de nuevo.

AWS | Amplify | Angular